<template>
  <el-container v-loading="loading">

   

    <el-table
      :data="tableData"
      tooltip-effect="dark"
      border
      :default-sort="{prop: 'date', order: 'descending'}"
      :row-class-name="tableRowClassName"
      size="small">
      <el-table-column
        prop="nickname"
     
        label="微信昵称">
      </el-table-column>
	  <el-table-column
        prop="avatar_url"
        label="微信头像"
    
        show-overflow-tooltip>
        <template slot-scope="scope">
          <img :src="scope.row.avatar_url" class="logo-img">
        </template>
      </el-table-column>
      <el-table-column
        prop="truename"
  
        label="姓名">
      </el-table-column>

      <el-table-column
        prop="link_phone"
   
        label="手机号码	">
      </el-table-column>
	  <el-table-column
		  prop="total_commission"

		  label="总佣金">
	  </el-table-column>

      <el-table-column
        prop="commission"
 
        label="可提现佣金"
        sortable>
      </el-table-column>

	  <el-table-column
		  prop="order_count"
	
		  label="订单数">
	  </el-table-column>
      <el-table-column
        prop="create_time"
        label="注册时间">
      </el-table-column>
      <el-table-column
        prop="is_distribe"
        label="用户状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.is_distribe==2">禁止</el-tag>
          <el-tag v-if="scope.row.is_distribe==1">正常</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        width="300"
        label="操作">
        <template slot-scope="scope">
          <el-button
            icon="fa fa-fw fa-toggle-on"
            size="mini"
            type="success"
            title="启用"
            @click="handleRunnerUsingItem(scope.$index, scope.row)">
            启用
          </el-button>

          <el-button
            icon="fa fa-fw fa-toggle-off"
            size="mini"
            type="warning"
            title="停用"
            @click="handleRunnerDisableItem(scope.$index, scope.row)">
            停用
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.currentPage"
      :page-sizes="pagination.per_page"
      :page-size="pagination.per_page"
      :total="pagination.total"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>


  </el-container>
</template>

<script>
	import api from '@/fetch/api.js'
  export default {
    mounted: function () {
      this.getData();
    },
    methods: {
      /**
       * 数据请求
       * */
      getData: function () {
        let _this = this;
        this.api.getDistributionList({
          page: this.pagination.currentPage,
          p: this.pagination.pageSize,
        }).then(function (res) {
          if (res.code == 1) {
            _this.tableData = res.data.data;
            _this.pagination.total = res.data.total;
          }
          _this.loading = false;
        }).catch(function (res) {
          throw new Error(res);
        });
      },
      /**
       * 分页数改变
       */
      handleSizeChange: function (pageSize) {
        this.pagination.pageSize = pageSize;
        this.getData();
      },
      /**
       * 当前页面改变
       * @param currentPage
       */
      handleCurrentChange: function (currentPage) {
        this.pagination.currentPage = currentPage;
        this.getData();
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row'
        } else if (rowIndex === 3) {
          return 'success-row'
        }
        return ''
      },

      /**
       * 服务人员启用单条数据
       */
      handleRunnerUsingItem(index, row) {
        let _this = this;
        let _id = row.id;
        this.$confirm('此操作将启用该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.api.getDistributionStart({id: _id}).then(function (res) {
            if (res.code == 1) {
              _this.getData();
              _this.$message({
                showClose: true,
                message: res.msg,
                type: 'success'
              });
            } else {
              _this.$message({
                showClose: true,
                message: res.msg,
                type: 'warning'
              });
            }
          }).catch(function (error) {
            throw new Error(error);
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消该操作'
          })
        })
      },
      /**
       * 服务人员停用单条数据
       */
      handleRunnerDisableItem(index, row) {
        let _this = this;
        let _id = row.id;
        this.$confirm('此操作将停用该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.api.getDistributionEnd({id: _id}).then(function (res) {
            if (res.code == 1) {
              _this.getData();
              _this.$message({
                showClose: true,
                message: res.msg,
                type: 'success'
              });
            } else {
              _this.$message({
                showClose: true,
                message: res.msg,
                type: 'warning'
              });
            }
          }).catch(function (error) {
            throw new Error(error);
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消该操作'
          })
        })
      },


			
    },
    data() {
      return {
				times:'',
				url:api.baseUrlPrefix,
				value6:'',
				card_no:'',
        loading: true,  // 页面加载
        tableData: [
          {
            id: '',                //类型：Number  必有字段  备注：无
            name: '',                //类型：String  必有字段  备注：姓名
            uid: '',                //类型：Number  必有字段  备注：关联用户
            identity: '',                //类型：String  必有字段  备注：身份证
            card_front: '',                //类型：String  必有字段  备注：身份证正面
            card_back: '',                //类型：String  必有字段  备注：身份证反面
            type: 1,                //类型：Number  必有字段  备注：1，跑腿；2，代驾；3，家政
            create_time: '',                //类型：String  必有字段  备注：申请时间
            money: '',                //类型：String  必有字段  备注：余额
            license_front: '',                //类型：Mixed  必有字段  备注：驾照正面
            license_back: '',                //类型：Mixed  必有字段  备注：驾照反面
            health_front: '',                //类型：Mixed  必有字段  备注：健康证
            bond_price: '',                //类型：String  必有字段  备注：保证金金额
            status: '',                //类型：String  必有字段  备注：0禁用1启用
            user: {                //类型：Object  必有字段  备注：关联用户
              id: '',                //类型：Number  必有字段  备注：无
              nickname: '',                //类型：String  必有字段  备注：无
              sex: '',                //类型：Number  必有字段  备注：无
              phone: ''                //类型：String  必有字段  备注：无
            }
          }
        ],
        multipleSelection: [],
        pagination: {
          total: 5,
          currentPage: 1,
          pageSize: 10,
          pageSizes: [5, 10, 20, 25, 30, 50, 100],
        },
        dialogVisible: false,   // 弹框
        currentDataIndex: null,
				offwork_count:'',
				onwork_count:''

      }
    },
  }
</script>

<style scoped>
  .el-container {
    display: block;
  }

  .el-table, .el-row {
    width: 98% !important;
    margin: 15px auto;
  }

  .el-pagination {
    text-align: center;
    margin: 15px 0;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .logo-img {
    width: 40px;
    height: 40px;
  }

  .label {
    width: 100px;
    display: inline-block;
    text-align: right;
    margin-right: 15px;
  }

  .big-img {
    width: 400px;
    height: 200px;
  }
</style>
